<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/css/font.css">
		<link rel="stylesheet" href="/static/css/weadmin.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="weadmin-body">
        <form class="layui-form" lay-filter="user">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <img id="headerImg"  <% if(user.imgheader){ %>src="<%- user.imgheader %>" <% }else{ %> src="/upload/0.jpg" <% } %> width="100" height="100" alt="">
                </div>
            </div>
           <input type="hidden" name="id" value="<%=user.id%>">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="we-red">*</span>登录名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="required"
                        autocomplete="off"  class="layui-input" value="<%-user.username%>" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="we-red">*</span>用户名不含下划线等特殊字符且不能全为数字
                </div>
            </div>
          <div class="layui-form-item">
              <label for="mobile" class="layui-form-label">
                  <span class="we-red">*</span>手机
              </label>
              <div class="layui-input-inline">
                  <input type="text"  id="mobile" name="mobile" required="" lay-verify="mobile"
                  autocomplete="off" class="layui-input" value="<%-user.mobile%>" >
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="we-red">*</span>请正确填写手机号码
              </div>
          </div>
          <div class="layui-form-item">
              <label for="email" class="layui-form-label">
                  <span class="we-red">*</span>邮箱
              </label>
              <div class="layui-input-inline">
                  <input type="text"  id="email" name="email" required="" lay-verify="email"
                  autocomplete="off" class="layui-input" value="<%-user.email%>" >
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="we-red">*</span>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label"><span class="we-red">*</span>角色</label>
              <div class="layui-input-block">
                <% for(let i=0;i<roles.length;i++){ %>
                  <input type="radio"  <% if(user.roleid===(i+1)){ %> checked <% } %> name="roleid" value="<%- i+1 %>" title="<%-roles[i].rolename %>">
                <% } %>
              </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
              <input type="radio" name="sex" value="0" title="男" <% if(user.sex=='0'){%> checked <% } %> >
              <input type="radio" name="sex" value="1" title="女" <% if(user.sex=="1"){ %> checked <% } %> >
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">婚否</label>
            <div class="layui-input-block">
              <input type="radio" name="marry" value="已婚" title="已婚" <% if(user.marry=='已婚'){ %> checked <% } %> >
              <input type="radio" name="marry" value="未婚" title="未婚" <% if(user.marry=='未婚'){ %> checked <% } %> >
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">上传头像</label>
            <input type="hidden" name="imgheader" value="<%=user.imgheader%>">
            <div class="layui-input-block">
              <button type="button" class="layui-btn" id="uploadImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个人简介</label>
            <div class="layui-input-block">
              <textarea  name="userdesc" placeholder="请输入内容" class="layui-textarea" ><%= user.userdesc %></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="edit">修改</button>
              <!-- <button type="reset" class="layui-btn layui-btn-primary reset">重置</button> -->
            </div>
          </div>
      </form>
    </div>
		<script src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript">
            layui.extend({
                    admin: '{/}/static/js/admin'
                });
            layui.use(['form','layer','admin','jquery','upload'], function(){
            var form = layui.form,
              admin = layui.admin,
              layer = layui.layer,
              upload = layui.upload,
              $=layui.jquery;
            
              //获取表单数据 
                var userObj = {};
                var u = $('form').serializeArray();
                //u的值为[{name: "a1", value: "xx"},
                //{name: "a2", value: "xx"}...]
                $.each(u, function() {
                    userObj[this.name] = this.value;
                });
               window.parent.userObj=userObj;
                //console.log(userObj);
            
            
              //自定义验证规则
              form.verify({
                nikename: function(value){
                  if(value.length < 5){
                    return '昵称至少得5个字符';
                  }
                }
              });
              
               //图片上传
               upload.render({//默认post请求
                elem: '#uploadImg' //绑定元素
                ,url: '/admin/user/userInfo/selfimgupload' //上传接口
                , field:"uploadImg" 
                ,done: function(res){
                  //上传完毕回调
                  layer.alert('上传成功')
                  $('#headerImg').attr('src',res.imgUrl)
                  $('input[name=imgheader]').val(res.imgUrl)
                }
                ,error: function(err){
                  console.log(err);
                  
                }
              });
              //监听提交
              form.on('submit(edit)', function(data){
                console.log(data);//obj对象
                //发异步，把数据提交给后台
                $.ajax({
                  method:'post',
                  url:'/admin/user/userLIst/edit',
                  data:data.field //{id: "1", username: "koko", mobile: "18256430987", email: "767882399@qq.com", roleid: "1", …}
                }).then((res)=>{
                  if(res.msg=='ok'){
                    layer.alert(res.content, {icon: 6},function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    window.parent.userObj= data.field
                    //console.log(data.field,11111);
                    
                    //关闭当前frame
                    parent.layer.close(index);
                    //刷新user列表(当前iframe层的上一层刷新页面)
                   
                  });
                }
                })  
                return false;
              });
              
            });
        </script>
  </body>

</html>